<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button v-on:click="counter += 1">Add 1</button>
			<h3>{{counter}}</h3>
			<button @click="fn1('zhangsan',$event)">方法</button>
			<div @click="fn3">
				<button @click.stop="fn2">阻止冒泡</button>
			</div>

			<a href="https://www.atstudy.com/" @click.prevent="fn4">学掌门(阻止默认行为)</a>

			<button @click.once="fn5">触发一次</button>
		</div>
		<script type="text/javascript">
			let vm = new Vue({
				el: '#app',
				data: {
					counter: 0
				},
				methods: {
					fn1: function(name, event) {
						console.log(this);
						console.log(event);
						console.log(name, this.counter);
					},
					fn2: function() {
						console.log("fn2");
					},
					fn3: function() {
						console.log("fn3");
					},
					fn4: function() {
						console.log("fn4");
					},
					fn5: function() {
						console.log("fn5");
					}

				}
			})
		</script>
	</body>
</html>
